import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '../vueRouter'
import Home from '../views/Home.vue'
// import Layout from '../components/Layout.vue'

// 1、注册路由组件
// Vue.use 是用来注册插件，它会调用传入对象的 install 方法
Vue.use(VueRouter)

// 2、路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about', // 动态路由
    name: 'About',
    // 开启 props, 会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接受 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue')
  },
  {
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
  }
  // 嵌套路由
  // {
  //   path: '/',
  //   component: Layout,
  //   children: [
  //     {
  //       path: '',
  //       name: 'Home',
  //       component: Home
  //     },
  //     {
  //       path: 'about/:id',
  //       name: 'About',
  //       // 开启 props, 会把 URL 中的参数传递给组件
  //       // 在组件中通过 props 来接受 URL 参数
  //       props: true,
  //       // route level code-splitting
  //       // this generates a separate chunk (about.[hash].js) for this route
  //       // which is lazy-loaded when the route is visited.
  //       component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  //     }
  //   ]
  // }
]

// 3、创建 router 对象
const router = new VueRouter({
  mode: 'hash',
  routes
})

export default router

/**
 * Vue Router实现原理
 * Vue Router 是前端路由，当路径切换的时候在浏览器端判断当前路径并加载对应的组件
 * Hash 模式
 *  Hash模式是把 URL 中 # 后面的内容作为路径地址，当 # 后面的内容发生改变时，并不会向服务器发送请求，但是它会把这个地址记录到浏览器的访问地址中
 * 当 Hash 改变后我们需要监听 Hash 的变化并做相应的处理，当发生变化后会触发 hashchange 事件，在 hashchange 事件中记录当前路由地址，并找到该路径对应的组件，并重新渲染
 * History 模式
 *  History 模式就是一个普通的 URL，通过调用History.pushState()方法来改变浏览器的地址栏，仅仅是改变浏览器的地址栏，并把当前地址记录到浏览器的访问历史中，并不会跳转到指定的路径。通过监听 popstate 事件来监听浏览器历史操作的变化，在 popstate 处理函数中，可以记录改变后的地址，需要注意的是，当调用 popstate 或者 replacestate 的时候并不会触发该事件，当触发浏览器前进或后退按钮的时候，或者在调用History的back/forward的方法的时候该事件才会被触发。当地址改变之后，根据当前的地址找到对应的组件重新渲染
 */

// 问题：Js中的对象、构造函数、原型、原型链及继承
